{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">  
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/table.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/modal.css?v=1">
	<link rel="stylesheet" href="{{ javascript_path }}libs/CLEditor/jquery.cleditor.css">
	<link rel="stylesheet" href="{{ javascript_path }}libs/formvalidator/developr.validationEngine.css">
    
    <!-- DataTables -->
	<link rel="stylesheet" href="{{ javascript_path }}libs/DataTables/jquery.dataTables.css?v=1">
{% endblock %}
{% block content_title %}Edit menu{% endblock %}
{% block content %}

		<div class="with-padding">
        <form action="{{ cms_uri }}/menus/edit/{{ menu.id }}" method="post" class="validateform">
        <input type="hidden" name="{{ csrf_token }}" value="{{ csrf_hash }}" />

                        <div class="columns">
                            <!-- Second row -->
                            <div class="six-columns">
                                <fieldset class="fieldset">
                                    <legend class="legend">Names</legend>
                                    {% for language, value in languages %}
                                    <div class="field-block button-height">
                                        <label class="label"><b>{{ language|capitalize }}:</b></label>
                                        <input type="text" name="{{ language }}_name" id="{{ language }}_name" class="input full-width validate[required,custom[onlyLetterNumberSp]]" value="{{ value }}">
                                    </div>   
                                    {% endfor %}
                                </fieldset> 
                            </div>    
							<div class="six-columns">
                                <fieldset class="fieldset">
                                    <legend class="legend">Type</legend>
                                    
                                    <div class="field-block button-height">
                                        <label class="label"><b>Type:</b></label>
                                        <select id="menu_type" name="type" class="select expandable-list" style="width:100%">
                                        	{% for type in types %}
                                        	<option value="{{ type }}">{{ type|capitalize }}</option>                                                           
                                        	{% endfor %}
                                        </select>
                                    </div>                                       
                                    
                                    <div class="field-block button-height type_page">
                                        <label class="label"><b>Select page:</b></label>
                                        <select name="type" id="page" name="page" class="select expandable-list" style="width:100%">
                                            {% for page in pages %}
                                                <option value="{{ page.id }}">{{ page.name }}</option>
                                            {% endfor %}                                                          
                                        </select>
                                    </div>
                                   
                                    <div class="field-block button-height type_url">
                                        <label class="label"><b>URL:</b></label>
                                        <input type="text" name="url" id="url" class="input full-width validate[required,custom[onlyLetterNumberSp]]" value="http://">
                                    </div>  
                                    
                                    <div class="field-block button-height type_module">
                                        <label class="label"><b>Select module:</b></label>
                                        <select name="type" id="menu_module" name="module" class="select expandable-list" style="width:100%">
                                            {% for module in modules %}
                                                {% for route in module.routes %}
                                                <option value="{{ module.name }}|{{ route.slug }}" data-slug="{{ route.slug }}">{{ module.name }} - {{ route.name }}</option>
                                                {% endfor %}    
                                            {% endfor %}                                                          
                                        </select>
                                        <input type="hidden" id="has_items" value="0">
                                    </div>    
                                    
                                    {% for module in modules %}
                                            {% for route in module.routes %} 
                                            {% if route.items %}
			                                    <div class="field-block button-height type_module_{{ route.slug }} ModuleSelector">
			                                        <label class="label"><b>Select:</b></label>
			                                        <select name="{{ route.slug }}_item" id="module_{{ route.slug }}_item" class="select expandable-list" style="width:100%">
			                                            {% for item in route.items %}
			                                                <option value="{{ item.id }}">{{ item.name }}</option>
			                                            {% endfor %}                                                          
			                                        </select>
			                                    </div>
			                                {% endif %}                                      
                                            {% endfor %}    
                                    {% endfor %}  
                                    
                                    
                                    <div id="type_field">
                                    
                                    </div>    
                                </fieldset> 
                            </div>    
							<div class="new-row twelve-columns">
                                <fieldset class="fieldset">
                                    <button type="submit" class="button huge full-width">Save</button>           
                                </fieldset>
                            </div>    
							

                            
                       </div>
            </form>
        </div>
        
{% endblock %}
{% block javascripts %}

	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>
	<script src="{{ javascript_path }}developr.table.js"></script>
	<script src="{{ javascript_path }}developr.tabs.js"></script>
	<script src="{{ javascript_path }}developr.confirm.js"></script>

	<script src="{{ javascript_path }}developr.modal.js"></script>
	<script src="{{ javascript_path }}libs/formvalidator/jquery.validationEngine.js"></script>
	<script src="{{ javascript_path }}libs/formvalidator/languages/jquery.validationEngine-en.js"></script>
    


	<!-- Plugins -->
	<script src="{{ javascript_path }}libs/jquery.tablesorter.min.js"></script>
	<script src="{{ javascript_path }}libs/DataTables/jquery.dataTables.min.js"></script>
	<script src="{{ javascript_path }}libs/CLEditor/jquery.cleditor.min.js"></script>
	<script src="{{ javascript_path }}radicms.slug.js"></script>
    <script>
	$(document).ready(function(){
		$(".validateform").validationEngine();
	   });
	</script>    
    <script type="text/javascript">

		// Call template init (optional, but faster if called manually)
		$.template.init();
		
		// types
		var types = [ 'type_page', 'type_url', 'type_module'];
		var type = '{{ menu.type }}';
		closeAll = function()
		{
			for(type in types)
			{
				$('.' + types[type]).hide();
			}
			closeModuleSelector();
		}
		openType = function(type)
		{
			$('.type_' + type).show();
		}
		
		
		
		
		//modules
		closeModuleSelector = function()
		{
			$('.ModuleSelector').hide();
		}
		openModuleSelector = function (slug)
		{
			$('.type_module_' + slug).show();
		}
		
		// bind
		$('#menu_module').change(function(){
			closeModuleSelector();
			alert ( $(this).find('option:selected').data('slug') );
			openModuleSelector($(this).find('option:selected').data('slug'));		
		})		
		
		$('#menu_type').change(function(){
			closeAll();
			openType($(this).find('option:selected').val());
		});
        
        closeAll();
        
        // Now reopen it if needed
        var menudata = {{ menudata }};
        if(menudata.module)
        {
        	
        	$('#menu_type').val(type);
        	//openType('module');
        	//$('#menu_module').val(menudata.module.name + "|" + menudata.module.route_slug);
        	//openModule
        	//alert(menudata.module.name + "|" + menudata.module.route_slug);
        }
        
	</script>
{% endblock %}

</body>
</html>